---
import '@/assets/main.css'
import preview from '@/assets/preview.png'
import { getImage } from 'astro:assets'
// import pkg from '/../packages/number-flow/package.json'
import FrameworkMenu from '@/components/FrameworkMenu'
import Link from '@/components/Link.astro'
import Nav from '@/components/Nav.astro'
// import { AstroFont } from 'astro-font'
// import * as path from 'node:path'
import { ClientRouter } from 'astro:transitions'
import { isActive } from '@/lib/url'
import { FRAMEWORKS, getFramework } from '@/lib/framework'

const frameworkId = getFramework(Astro.params)
const framework = frameworkId && FRAMEWORKS[frameworkId]

const canonicalURL = new URL(Astro.url.pathname, Astro.site)

const previewOptimized = await getImage({ src: preview, format: 'png' })
const image = import.meta.env.URL
	? new URL(previewOptimized.src, import.meta.env.URL)
	: previewOptimized.src

type Props = {
	title: string
	description: string
	paddingBottom?: string
}

const { title, description, paddingBottom = "~pb-40/52" } = Astro.props

const app = {
	'@context': 'https://schema.org',
	'@type': 'WebSite',
	name: 'NumberFlow',
	alternateName: ['number-flow'],
	url: Astro.site
}
---

<html
	lang="en"
	data-framework={frameworkId || undefined}
	class="text-primary min-h-screen scroll-pt-10 overflow-x-hidden bg-white antialiased [--accent:var(--framework-light,theme(colors.blue.500))] motion-safe:scroll-smooth dark:bg-zinc-950 dark:[--accent:var(--framework-dark,theme(colors.blue.500))]"
	style={{ '--framework-light': framework?.lightColor, '--framework-dark': framework?.darkColor }}
>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<meta name="twitter:creator" content="@mbarvian" />
		<meta property="og:type" content="article" />
		<meta property="og:image" content={image} />
		<meta property="og:site_name" content="NumberFlow" />
		<meta name="twitter:card" content="summary_large_image" />
		<meta property="twitter:image" content={image} />
		<meta name="generator" content={Astro.generator} />
		<title>
			{title}
		</title>
		<!-- <AstroFont
			config={[
				{
					name: 'Inter',
					src: [
						{
							weight: '100 900',
							style: 'normal',
							path: path.join(process.cwd(), 'public', 'fonts', 'Inter-roman-latin.var.woff2')
						}
					],
					preload: true,
					display: 'block', // for View Transitions
					cssVariable: 'font-inter',
					fallback: 'sans-serif'
				}
			]}
		/> -->
		<link rel="canonical" href={canonicalURL} />
		<meta property="og:title" content={title} />
		<meta name="twitter:title" content={title} />
		<meta name="description" content={description} />
		<meta property="og:description" content={description} />
		<meta name="twitter:description" content={description} />
		<script is:inline>
			if (
				HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode') ||
				HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')
			)
				document.documentElement.setAttribute('data-supports-dsd', '')
		</script>
		<script type="application/ld+json" is:inline set:html={JSON.stringify(app)} />

		<ClientRouter />
	</head>
	<body class:list={[paddingBottom, '~pt-12/28']}> 
		<div class="container inline-flex items-baseline justify-center whitespace-nowrap text-center">
			{
				isActive('/', Astro.url) ? (
					<h1 class="font-medium">
						<Link className="font-medium" href="/">
							NumberFlow
						</Link>
						{/* <span class="inline-block rounded-sm border px-1 py-0.5 align-top text-[10px] font-medium"> */}
						{/* <span class="text-muted"> */}
						{/* v{pkg.version} */}
						{/* </span> */}
					</h1>
				) : (
					<Link className="font-medium" href="/">
						NumberFlow
					</Link>
				)
			}
			{
				frameworkId && (
					<>
						&nbsp;<span class="text-muted">for</span>&nbsp;
						<FrameworkMenu className="-ml-2" url={Astro.url} value={frameworkId} client:load />
					</>
				)
			}
		</div>
		<Nav />

		<main class="overflow-x-clip">
			<slot />
		</main>
	</body>
</html>

<style is:global>
	/* Disable default view transitions for root */
	::view-transition-group(root),
	::view-transition-image-pair(root),
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
</style>

<script>
	// Disable smooth scroll when transitioning, which also fixes anchor links for some reason:
	document.addEventListener('astro:before-swap', (event) => {
		event.newDocument.documentElement.style.scrollBehavior = 'auto'
		event.newDocument.documentElement.dataset.supportsDsd =
			document.documentElement.dataset.supportsDsd

		document.addEventListener(
			'astro:after-swap',
			() => {
				document.documentElement.style.scrollBehavior = ''
			},
			{ once: true }
		)
	})
</script>
